<template>
  <button type="button" @click="isShow=!isShow">点我试试</button>
  <transition @enter="fromTo" @leave="to" :duration="{enter:3000,leave:3000}">
    <div v-if="isShow"></div>
  </transition>
</template>

<script>
import {gsap} from "gsap";

export default {
  name: "LhzGsap",
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    from(element) {
      gsap.from(element, {
        x: 300,
        backgroundColor: '#FF0000',
        duration: 3
      });
    },
    to(element) {
      gsap.to(element, {
        x: 300,
        backgroundColor: '#FF0000',
        duration: 3
      });
    },
    fromTo(element) {
      gsap.fromTo(element, {
        x: 300,
        backgroundColor: '#FF0000',
        duration: 3,
        width: 100,
        height: 100
      }, {
        x: 600,
        backgroundColor: '#00FF00',
        duration: 3,
        width: 300,
        height: 300
      });
    }
  }
}
</script>

<style scoped>
.lhz {
  width: 300px;
  height: 300px;
  background-color: #00AA00;
}

button {
  width: 300px;
  height: 100px;
  font-size: 66px;
}
</style>